<template>
  <simple-layout title="支付密码">
    <!-- 手机号验证码 -->
    <div class="verify-box" v-show="currentBox === 1">
      <p class="tips">为了您的账户安全，请完成身份验证</p>
      <div class="mui-input-row">
        <label>手机号</label>
        <input type="text" class="mui-input-clear" placeholder="请输入手机号" v-model="phone">
      </div>
      <div class="mui-input-row">
        <label>验证码</label>
        <input type="text" class="" placeholder="请输入验证码" v-model="code">
        <span class="verrify-btn" @click="sendCode">{{numCode}}</span>
      </div>

      <div class="ab-button-row">
        <button type="button" class="ab-btn ab-btn-primary"  @click="submitVerify">提交</button>
      </div>
    </div>

    <!-- 设置6位支付密码 -->
    <div class="pwd-set-box" v-show="currentBox === 2">
      <h4>设置6位数字支付密码</h4>
      <div class="pwd-input-list">
        <input type="number" v-model="pwd1">
        <input type="number" v-model="pwd2">
        <input type="number" v-model="pwd3">
        <input type="number" v-model="pwd4">
        <input type="number" v-model="pwd5">
        <input type="number" v-model="pwd6">
      </div>
      <div class="ab-button-row">
        <button type="button" class="ab-btn ab-btn-primary" @click="submitPayPwd">提交</button>
      </div>
    </div>

    <!-- 设置成功 -->
    <div class="success-box" v-show="currentBox === 3">
      <div>
        <!--<img src="../../assets/auth/resetpayok.png">-->
        <h4>支付密码设置成功</h4>

        <div class="ab-button-row">
          <button type="button" class="ab-btn ab-btn-primary" @click="">返回账户首页</button>
        </div>
      </div>
    </div>
  </simple-layout>



</template>


<script>
  import SimpleLayout from '../../components/SimpleLayout';
  import AuthService from '../../service/auth';

  export default {
    name: "Login",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        userInfo: JSON.parse(this.$cookie.get('user')),
        currentBox:1,
        phone: '',
        code: '',
        password: '',
        numCode: '发送验证码',
        pwd1: '',
        pwd2: '',
        pwd3: '',
        pwd4: '',
        pwd5: '',
        pwd6: '',
      }
    },
    computed: {},
    watch: {},
    mounted: function () {
      this.phone = this.userInfo.mobile
    },
    methods: {
      // 页面切换
      submitVerify(){
        if(this.code){
          this.currentBox = 2;
        }else{
          mui.confirm('','请输入验证码',new Array('关闭'));
        }
      },
      submitPwd(){
        this.currentBox = 3;
      },

      // 点击发送验证码
      sendCode() {
        if (this.numCode !== '发送验证码') {
          return
        }
        const params = {
          phone: this.phone,
        }
        AuthService.sendCodeForResetPayPwd(params).then((res) => {
          if (res.status == 200) {
            this.numCode = 60;
            this.validateCodeClock = setInterval(() => {
              this.numCode = this.numCode - 1;
              if (this.numCode <= 0) {
                clearInterval(this.validateCodeClock);
                this.numCode = '发送验证码';
              }
            }, 1000);
          }
        })
      },
      // 点击提交
      submitPayPwd() {
        this.password = this.pwd1+this.pwd2+this.pwd3+this.pwd4+this.pwd5+this.pwd6;
        const params = {
          mobile: this.phone,
          captcha:this.code,
          newPwd: this.password
        }
        AuthService.modifyPwdWithoutMd5(params).then((res) => {
          if (res.status == 200) {
            mui.confirm('','设置成功',new Array('关闭'),(e)=>{
              this.$router.push({ name:"UserInfo" });
            });
          }
          else if(res.status == '001020'){
            mui.confirm('','验证码错误',new Array('关闭'),(e)=>{
              this.currentBox =1
            });
          }
        })
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .tips {
    height: 30px;
    line-height: 30px;
    background-color: #fff9f3;
    text-align: left;
    padding-left: 20px;
    font-size: 12px;
    color: #909091;
  }
  .mui-input-row {
    border-bottom: 1px solid #efeff4;
  }
  .mui-input-row label {
    width: 26%;
  }
  .mui-input-row input {
    float:left;
    width:41%
  }
  .verrify-btn {
    float: left;
    padding: 11px 0;
    color: #7b7fee;
  }
  .ab-btn-primary {
    margin-top: 50px;
    width: 83%;
    height: 40px;
    color: white;
    background: rgb(130, 130, 244);
    border-radius: 15px;
    border: 0px;
  }
  .pwd-input-list {
    display: flex;
    justify-content: center;
    width: 85%;
    margin: 0 auto;
  }
  .pwd-input-list input {
    float: left;
    width: 20%;
    height: 50px;
    border-radius:0px;
    border-right: none;
    text-align: center;
  }
  .pwd-input-list input:last-child {
    border-right: 1px solid rgba(0, 0, 0, .2);
  }
  .pwd-set-box h4 {
    margin: 80px 0 35px;
  }

  .success-box img {
    margin-top: 55px;
    margin-bottom: 10px;
  }
</style>
